<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>实例：iframe</title>
	</head>
	<body>
		<!--
    相同二级域的页面，也可以无限制地进行交互了。
    例如 john.site.com，peter.site.com 和 site.com（它们共同的二级域是 site.com），我们可以使浏览器忽略该差异，使得它们可以被作为“同源”的来对待，以便进行跨窗口通信。
    -->

		<!-- 一个 iframe 标签承载了一个单独的嵌入的窗口，它具有自己 document 和 window 对象 -->

		<!-- iframe.contentWindow 来获取 <iframe> 中的 window 对象 -->
		<!-- iframe.contentDocument 来获取 <iframe> 中的 document 对象 -->

		<iframe id="myIframe" src="https://example.com"></iframe>

		<script>
			myIframe.onload = function () {
				// 【可以获取】获取 iframe 内部的 window 对象
				const iframeWindow = myIframe.contentWindow
				console.log('iframeWindow：', iframeWindow)

				// 【无法获取，因为不同源】获取 iframe 内部的 document 对象
				const iframeDocument = myIframe.contentDocument
				console.log('iframeDocument', iframeDocument)

				// 【无法读取，因为不同源】location 地址
				// console.log(myIframe.contentWindow.location.href) // Error

				// 【可以写入】location 地址
				myIframe.contentWindow.location = '/' // OK
				myIframe.onload = null // 清空处理程序，在 location 更改后不要再运行它。
			}
		</script>

		<!-- ************************************************************************************************** -->

		<!-- 如果 iframe 具有相同的源，我们可以使用它做任何事情。 -->
		<iframe id="myIframe2" src="/"></iframe>

		<script>
			myIframe2.onload = function () {
				myIframe2.contentDocument.body.prepend('Hello, World!')
			}
		</script>
	</body>
</html>
